#{extends 'overlay.html' /} #{set title:'Task Report' /}
#{if empty}
#{note}There is not enough information to display#{/note}
#{/if}
#{else}
#{set 'moreStyles'}
<style type="text/css">
label {
	background: none repeat scroll 0 0 #EFEFEF;
	color: #333333;
	font-weight: bold;
	height: 100%;
	margin-bottom: -10px;
	margin-left: -10px;
	margin-top: -10px;
	margin-right: 10px;
	width: 150px;
	padding: 10px 0 10px 10px;
	position: relative;
	top: 0;
}

td {
	border: 1px solid #555555;
	padding: 7px;
}

.red {
	color: red !important
}

div {
	font-size: 10px
}

.comment {
	padding: 10px;
	margin: 10px 0px;
	border: 1px dashed #ddd
}

.comment label {
	background: transparent;
	margin: 0px;
	padding: 0px;
	height: auto;
}

.comment .crudField {
	border-bottom: 1px solid #EEEEEE;
	margin: -10px -10px 10px;
	padding: 10px;
	position: relative;
}

#info .crudField {
	border-right: 1px solid #EEEEEE;
}

.big {
	border-right: 0px !important;
}

.crudField.i {
	font-size: 14px;
	border-right: 0px !important;
}
</style>
#{/set}
#{set 'moreScripts'}
	<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/jquery.jqplot.css'}"/>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/jquery.jqplot.js'}"></script>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.logAxisRenderer.js'}"></script>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.canvasTextRenderer.js'}"></script>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.cursor.js'}"></script>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.canvasAxisLabelRenderer.js'}"></script>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.canvasAxisTickRenderer.js'}"></script>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.dateAxisRenderer.js'}"></script>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.categoryAxisRenderer.js'}"></script>
	<script language="javascript" type="text/javascript" src="@{'/public/javascripts/plugins/jqplot.barRenderer.js'}"></script>
<script type="text/javascript">
function graphed(data)
{
	var xx = '1 day';
	if(data.length>900)
		xx ='1 year';
	if(data.length>365)
		xx = '1 month';
	if(data.length>30)
		xx= '1 week';


	var plot1 = $.jqplot('cSTATS', [data], 
			{
		 series:[
		         {renderer:$.jqplot.BarRenderer,color:'#E5A1A5'}],
	    axes:{
	        xaxis:{
	            renderer:$.jqplot.DateAxisRenderer,
				labelOptions:{fontFamily:'Helvetica',fontSize: '13pt'},
				label:'Day',
				max:'${maximum_date}',
				min:'${minimum_date}',
				tickInterval:xx,
					showTicks: true,
	        }
	    ,
	    
	    yaxis:
		{
			labelOptions:{fontFamily:'Helvetica',fontSize: '13pt'},
			label:'Remainging Points',
			labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
			renderer: $.jqplot.LinearAxisRenderer,  
			showTicks: true, 
			tickInterval:1,
			min:0,
		}
	},
	
			
		grid: 
		{
			drawGridLines: true,       
			gridLineColor: '#333333',    
			background: '#f2f2f2',      
			borderColor: '#999999',     
			borderWidth: 2.0,           
			shadow: true,               
			shadowAngle: 45,            
			shadowOffset: 1.5,          
			shadowWidth: 3,             
			shadowDepth: 3,             
			shadowAlpha: 0.07,          
			renderer: $.jqplot.CanvasGridRenderer,     
		},
	    cursor: {tooltipLocation:'sw', zoom:true, clickReset:true}, 
	});
}
function graph(data)
{
	var xx = 1;
	if(data.length>900)
		xx =360;
	if(data.length>365)
		xx = 30;
	if(data.length>30)
		xx= 7;
	var plot1 = $.jqplot('STATS', [data], 
	{
		seriesDefaults:
		{color:'#E5A1A5',showMarker:false
		},
		axes:
		{
			xaxis:
			{
				label:'Days', 
				labelOptions:{ fontFamily:'Helvetica',fontSize: '13pt'},
				labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
				//ticks: xTicks
			tickInterval:xx
			}, 
			yaxis:
			{
				labelOptions:{fontFamily:'Helvetica',fontSize: '13pt'},
				label:'Remainging Points',
				labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
			  //  ticks:yTicks
				tickInterval:2
			}
		},
		axesDefaults: 
		{
			renderer: $.jqplot.LinearAxisRenderer,  
			showTicks: true,   
			min:0,
		},			
		grid: 
		{
			drawGridLines: true,       
			gridLineColor: '#999',    
			background: '#f2f2f2',      
			borderColor: '#999999',     
			borderWidth: 2.0,           
			shadow: true,               
			shadowAngle: 45,            
			shadowOffset: 1.5,          
			shadowWidth: 3,             
			shadowDepth: 3,             
			shadowAlpha: 0.07,          
			renderer: $.jqplot.CanvasGridRenderer,     
		},cursor: {tooltipLocation:'sw', followMouse:true,showVerticalLine:true,showHorizontalLine:true,zoom:true, clickReset:true,showTooltipDataPosition:true}, 
				
	});
}


</script>
#{/set}
#{set 'onLoad'}
;
#{if task.estimationPointsPerDay}
graph(${efforts});
#{/if}

#{if changes.size()!=0}
graphed(${changes});
#{/if}
$('#accordion').accordion({autoHeight: false});
#{/set}
	<h1>Task ${task.getTaskNumber()} : ${task.description} </h1>
	<div id="accordion">
    <h6><a href="#">Task Information</a></h6>

    <div id="info">
    <div class="crudField i">
		#{if task.description}
			<span class="big">${task.description}</span>
		#{/if}
		#{else}
			<div style="padding: 10px;margin:10px"class="ui-state-error ui-corner-all">
				<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-alert"></span>This Task doesn't have a description.
			</div>
		#{/else}
	</div>
	<div class="crudField">
	    #{if task.project}
	    <label>Project</label>${task.project.name}
	    #{/if}
	    #{else}
	     <div class="red"><label>Project</label>This task doesn't belong to a project!</div>
	    #{/else}
	</div>
	#{if task.component}
	#{if task.component.name.equalsIgnoreCase("Default Component")}
	#{/if}
	#{else}
	<div class="crudField">
	<label>Component</label>${task.component.getFullName()}
	</div>
	#{/else}
	#{/if}
	<div class="crudField">
	    #{if task.reporter}
	    <label>Reporter</label>${task.reporter.getDisplayName(project).raw()}
	    #{/if}
	    #{else}
	     <div class="red"><label>Reporter</label>No one reported this task!</div>
	    #{/else}
	</div>
	<div class="crudField">
	    #{if task.assignee}
	    <label>Assignee</label>${task.assignee.getDisplayName(project).raw()}
	    #{/if}
	    #{else}
	     <div class="red"><label>Assignee</label>No one is assigned to this task!</div>
	    #{/else}
	</div>
    <div class="crudField">
	    #{if task.reviewer}
	    <label>Reviewer</label>${task.reviewer.getDisplayName(project).raw()}
	    #{/if}
	    #{else}
	     <div class="red"><label>Reviewer</label>No one is reviewing this task!</div>
	    #{/else}
	</div>
  	<div class="crudField">
	    #{if task.taskSprint}
	    <label>Sprint</label>${task.taskSprint.sprintNumber}
	    #{/if}
	    #{else}
	     <div class="red"><label>Sprint</label>This task isn't assigned to a sprint!</div>
	    #{/else}
	</div>
	<div class="crudField">
	    #{if task.taskType}
	    <label>Type</label>${task.taskType.name}
	    #{/if}
	    #{else}
	     <div class="red"><label>Type</label>This task doesn't have a type!</div>
	    #{/else}
	</div>
	<div class="crudField">
	    #{if task.taskStatus}
	    <label>Status</label>${task.taskStatus.name}
	    #{/if}
	    #{else}
	     <div class="red"><label>Status</label>This task doesn't have a type!</div>
	    #{/else}
	</div>
	#{if task.estimationPoints}
	<div class="crudField">   
	    <label>Estimation Points</label>${task.estimationPoints}
	</div>
	#{/if}
 	#{if task.parent}
	<div class="crudField">   
	    <label>Belongs to</label>${task.parent.getTaskNumber()}
	</div>
	#{/if}
	#{if task.subTasks}
	<div class="crudField"> 
	<label>SubTasks</label>
	#{list items:task.subTasks, as:'dt'}
	#{if dt.id==task.subTasks.get(task.subTasks.size()-1).id}
	<a href="@{Tasks.report(dt.id)}" title="goto task ${dt.id}">${dt.getTaskNumber()}</a>
	#{/if}
	#{else}
	<a href="@{Tasks.report(dt.id)}" title="goto task ${dt.id}">${dt.getTaskNumber()}</a>, 
	#{/else}
	#{/list}
	</div>
	#{/if}
	#{if task.dependentTasks}
	<div class="crudField"> 
	<label>Dependant tasks</label>
	#{list items:task.dependentTasks, as:'dt'}
	#{if dt.id==task.dependentTasks.get(task.dependentTasks.size()-1).id}
	<a href="@{Tasks.report(dt.id)}" title="goto task ${dt.id}">${dt.getTaskNumber()}</a>
	#{/if}
	#{else}
	<a href="@{Tasks.report(dt.id)}" title="goto task ${dt.id}">${dt.getTaskNumber()}</a>, 
	#{/else}
	#{/list}
	</div>
	#{/if}
	<div id="comments_${task.id}"style="margin-top:10px">
	<h1>Comments</h1>

#{if task.comments}
#{list items:task.comments, as:'t'}
#{ifnot t.deleted}
<div class="comment" id="L_${t.id}"style="display:none;text-align:center"><img src="/public/images/tinyLoading.gif" alt="Loading"/></div>
<div class="comment" id="c_${t.id}">
<div class="crudField">
<label>Author</label>${t.author.getDisplayName(task.project).raw()}
</div>
<div class="crudField">
<label>Time</label>${new Date(t.timeOfComment)}
</div>
${t.comment.raw()}#{if connected.in(task.project).can("modifyTask") || connected.id == t.author.id}
<div class="red" style="text-align:right"><a href="#" class="red"onclick="confirm_delete('${t.id}')">delete?</a></div>
</div>
#{/if}
#{/ifnot}
#{/list}
#{/if}
#{else}
	<div style="padding: 10px;" class="ui-state-error ui-corner-all"> 
		<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-alert"></span> 
		<strong>There are no comments associated with this task. </strong>
</div>
#{/else}</div>
#{if connected.projects.contains(task.project)}
<div id=""class="comment">
<div class="crudField">
<h1>Add a comment?</h1>
<label>Comment</label>
<p id ="reply" style="color:red"></p>
</div>
<div class="crudField">
<textarea id="theComment"style="width:100%;"></textarea>
<div id="loader" style="display:none;text-align:center">
<img src="/public/images/tinyLoading.gif" alt="Loading"/></div>
</div>
<button onclick="send()">Add comment</button>
<script type="text/javascript">
function confirm_delete(el)
{
var r=confirm("Are you sure you would like to delete this comment?");
	if (r==true)
  	{
	  	$('#c_'+el).hide();
	  	$('#L_'+el).show();
		$.post('@{Comments.deleteComment()}',{id:el})
	}
}



function send(){
	document.getElementById("reply").innerHTML="";
	var comment = $("#theComment").val();
	if(comment.length > 250){
		document.getElementById("reply").innerHTML+="Comment too long!";
		$('#theComment').val('');
	}else{
		if(comment.length == 0){
			document.getElementById("reply").innerHTML+="Please enter text!";
			$('#theComment').val('');
		}else{
	$('#theComment').hide();
	$('#loader').show();
	
	$.post("@{Comments.addComment()}",{taskId:${task.id},comment:$("#theComment").val()},function(){
		$('#theComment').show();
		$('#loader').hide();
		});
	$('#theComment').val('');
	}
}
	} </script>
</div>
	#{/if}

</div>
<h6><a href="#">Task Change Log</a></h6>
<div>
#{if changes}
<table id="sprintTable"class="sortable draggable">
	<thead style="text-align:left !important">
		<tr><td>Time</td><td>User</td><td>Action</td></tr>
</thead>
#{list items:temp, as:'t'}
<tr>
<td>${new Date(t.timestamp).toString()}</td>
<td>${t.user.name}</td>
<td>${t.message}</td>
</tr>

#{/list}
</table>
#{/if}
#{else}
	<div style="padding: 10px;" class="ui-state-error ui-corner-all"> 
		<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-alert"></span> 
		<strong>There are no changes associated with this task. </strong>
	</div>
#{/else}
</div>
<h6><a href="#">Task Change Log Stats</a></h6>
<div>
#{if changes}
<div style="margin-top:20px;padding: 10px;margin:10px" class="ui-state-highlight ui-corner-all"> 
	<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
	<strong>NOTE: </strong>click and drag the cursor to zoom into the graph, click it to reset the graph.
</div>
   <div id="cSTATS" class="jqplot" style="width:95%">
   </div>
#{/if}
#{else}
	<div style="padding: 10px;" class="ui-state-error ui-corner-all"> 
		<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-alert"></span> 
		<strong>There are no changes associated with this task. </strong>
	</div>
#{/else}
</div>
	
<h6><a href="#">Task Progression Stats</a></h6>
<div>

#{if task.estimationPointsPerDay}
	<div style="margin-top:20px;padding: 10px;margin:10px" class="ui-state-highlight ui-corner-all"> 
		<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
		<strong>NOTE: </strong>click and drag the cursor to zoom into the graph, click it to reset the graph.
	</div>
    <div id="STATS" class="jqplot"style="width:95%">
    </div>
#{/if}
#{else}
	<div style="padding: 10px;" class="ui-state-error ui-corner-all"> 
		<span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-alert"></span> 
		<strong>There is either not enough data to display, or the current task isnt assigned to a sprint </strong>
	</div>
#{/else}
</div>
</div>
</div>#{/else}